<template>
  <view class="content">
    <view
      class="title"
      :style="
        'height:' +
        header.height +
        'px;' +
        'padding-top:' +
        header.top +
        'px;padding-bottom:6rpx'
      "
    >
      <image
        @click="retu_back"
        src="../../static/images/public/return.png"
        mode=""
      ></image>
    </view>
    <view
      class="white-bg datum-box"
      :style="'padding-top:' + (header.height + header.top + 20) + 'px;'"
    >
      <view class="inner">
        <view class="my-profile-pic"
          ><image
            src="http://static.kuaimayoupin.com/7017779076031672.png"
            mode="aspectFit"
          ></image
        ></view>
      </view>
      <view class="line"></view>
      <view class="inner">
        <view class="my-profile-box">
          <u-form :model="form" ref="uForm" :rules="rules">
            <view class="my-profile-box-title">基本信息</view>
            <view class="information-line">
              <view class="information-line-label">本人头像</view>
              <view class="information-line-link">
                <view class="u-avatar-wrap"
                  ><image
                    v-if="form.avatar"
                    class="u-avatar-demo"
                    :src="form.avatar"
                    mode="aspectFill"
                    @tap="chooseAvatar"
                  ></image
                ><view v-else @tap="chooseAvatar">请选择</view></view>
              </view>
            </view>
            <view class="information-line">
              <view class="information-line-label">昵称</view>
              <view class="information-line-link">
                <u-form-item prop="nick_name">
                  <u-input
                    v-model="form.nick_name"
                    class="text-right"
                    :clearable="false"
                    placeholder="请输入昵称"
                    placeholder-style="color:#8389a0"
                  />
                </u-form-item>
              </view>
            </view>
            <view class="information-line" @click="selectShow('sex')">
              <view class="information-line-label">性别</view>
              <view class="information-line-link">
                {{ form.sex | sexLabel }}
              </view>
            </view>

            <view class="information-line" @click="selectShow('height')">
              <view class="information-line-label">身高</view>
              <view class="information-line-link">
                {{ form.height ? form.height + "cm" : "请选择" }}
              </view>
            </view>

            <view
              class="information-line"
              @click="selectShow('marital_status')"
            >
              <view class="information-line-label">婚姻状况</view>
              <view class="information-line-link">{{
                form.marital_status == "" ? "请选择" : form.marital_status
              }}</view>
            </view>
            <view class="information-line" @click="selectDatePicker('date')">
              <view class="information-line-label">出生日期</view>
              <view class="information-line-link">{{
                form.birthday ? form.birthday : "请填写出生日期"
              }}</view>
            </view>
            <view class="information-line" @click="selectShow('education')">
              <view class="information-line-label">学历</view>
              <view class="information-line-link">
                <template>
                  <view class="information-show">{{
                    form.education == "" ? "请选择" : form.education
                  }}</view>
                </template>
              </view>
            </view>
            <view class="information-line">
              <view class="information-line-label">毕业院校</view>
              <view class="information-line-link">
                <u-input
                  v-model="form.graduation_school"
                  class="text-right"
                  :clearable="false"
                  placeholder="请输入毕业院校"
                  placeholder-style="color:#8389a0"
                />
              </view>
            </view>
            <view
              class="information-line"
              @click="addressShowEvent('work_place')"
            >
              <view class="information-line-label">工作地</view>
              <view class="information-line-link">
                <template>
                  <view class="information-show">{{
                    form.work_place == "" ? "请选择" : form.work_place
                  }}</view>
                </template>
              </view>
            </view>
            <view
              class="information-line"
              @click="addressShowEvent('province')"
            >
              <view class="information-line-label">籍贯</view>
              <view class="information-line-link">
                <template v-if="form.province != ''">
                  <view class="information-show">{{ form.province }}</view>
                </template>
                <template v-else>
                  <input
                    type="text"
                    disabled
                    value=""
                    placeholder="请选择籍贯"
                  />
                </template>
              </view>
            </view>
            <view class="information-line" @click="selectShow('salary1')">
              <view class="information-line-label">月收入</view>
              <view class="information-line-link">{{
                form.salary1 == "" ? "请选择" : form.salary1
              }}</view>
            </view>
            <view class="information-line" @click="jobSelectShow = true">
              <view class="information-line-label">职业</view>
              <view class="information-line-link">
                <u-form-item prop="job">
                  <u-input
                    v-model="form.job"
                    class="text-right"
                    :clearable="false"
                    placeholder="请输入职业"
                    placeholder-style="color:#8389a0"
                  />
                </u-form-item>
              </view>
            </view>
            <view class="information-line" @click="selectShow('work_type')">
              <view class="information-line-label">单位性质</view>
              <view class="information-line-link">
                <template>
                  <view class="information-show">{{
                    form.work_type == "" ? "请选择" : form.work_type
                  }}</view>
                </template>
              </view>
            </view>
            <view class="information-line" @click="selectShow('housing')">
              <view class="information-line-label">住房</view>
              <view class="information-line-link">
                <template>
                  <view class="information-show">{{
                    form.housing == "" ? "请选择" : form.housing
                  }}</view>
                </template>
              </view>
            </view>

            <personal-label ref="myPersonalLabel" />
            <mineSelect
              :selectType.sync="selectType"
              ref="mineSelect"
              @closeValue="closeValue"
              @chooseValue="chooseValue"
            ></mineSelect>

            <view class="mt20">
              <view class="my-profile-box-title">宣传图片</view>
              <imgUpload
                :count="count"
                @obtain_img="obtain_img"
                :name="name"
                :header="header"
                :url="url"
              ></imgUpload>
            </view>

            <view class="fixation"
              ><button form-type="submit" @click="onSubmit" class="submitBtn">
                提交
              </button></view
            >
            <u-select
              v-model="jobSelectShow"
              mode="mutil-column-auto"
              :list="JobList"
              title="123"
              @confirm="confirmSelect"
            ></u-select>
          </u-form>
        </view>
      </view>

      <u-picker
        mode="region"
        v-model="addressShow"
        :params="params"
        @confirm="provinceEvent"
      ></u-picker>
      <u-calendar
        v-model="birthdayShow"
        :mode="mode"
        @change="confirmBirthday"
      ></u-calendar>
      <u-toast ref="uToast" />
      <!-- 注意事项弹窗 -->
      <u-modal
        v-model="show"
        title="注意事项"
        :show-confirm-button="false"
        :title-style="{ color: '#474a58' }"
        :mask-close-able="true"
      >
        <view class="hint-message">
          <text class="hint-message">
            本平台为高端婚恋交友平台， 需要实名认证，后台运营会认真审核的哦!
            请真实填写您的资料，并确保目前单身状态，否则，一经举报，将被列入诚信黑名单，会员费不予退还。
          </text>
          <view class="hint-sign">
            <checkbox-group @change="consentChange">
              <checkbox
                :checked="isConsent"
                style="transform: scale(0.7)"
                value="同意"
              />
              同意并签署《单身交友说明》
            </checkbox-group>
          </view>
          <view
            :class="['hint-btn', 'global-button', { isDisabled: !isConsent }]"
            @click="consentEvent"
            >我已知晓</view
          >
        </view>
      </u-modal>
      <date-time-picker
        ref="date-time"
        :indicatorStyle="indicatorStyle"
        :type="type"
        :datestring="dateString"
        @change="dateTimeChange"
      ></date-time-picker>
      <loginDialog
        :isShow="isShowLogin"
        @goProtocol="goProtocol"
        v-on:decryptPhoneNumber="decryptPhoneNumber"
        v-on:dismiss="loginDismiss"
      ></loginDialog>
    </view>
  </view>
</template>

<script>
import mineSelect from "@/pageA/mine-select/mine-select";
import PersonalLabel from "@/pageA/individuality/individuality.vue";
import loginDialog from "@/components/login/login-dialog.vue";
import { EventBus } from "@/util/event-bus.js";

import {
  completeInformation,
  recentAuthUsers,
  getCareerList,
  loadAuthInfo,
} from "@/api/user/user";
import { createTip } from "@/api/home/home.js";
import { getUserInfo } from "@/util/getInfo.js";
import request from "@/util/request/request.js";
import DateTimePicker from "@/pageA/bory-dateTimePicker/bory-dateTimePicker.vue";
import imgUpload from "@/pageA/components/img-upload/img-upload.vue";
import wxKeyManager from "@/util/getWXKey.js";

export default {
  components: {
    mineSelect,
    DateTimePicker,
    PersonalLabel,
    imgUpload,
    loginDialog,
  },
  data() {
    return {
      count: 9,
      name: "file", //必填
      url: "https://api.kuaimayoupin.com/huipaysns/mitang/user/upload", //必填
      didCustomize: false,
      isContent: "您的个人资料已经修改，退出前要保存吗?",
      isShowLogin: false,
      isLogin: false,
      header: {
        top: 0,
        height: 0,
        allHeight: 0,
      },
      isConsent: true,
      action: request.config.baseUrl + "user/upload",
      uploadHeader: {
        token: "",
      },
      params: {
        province: true,
        city: true,
        area: false,
      },
      addressShow: false,
      maxPicNum: 1,
      isHint: true,
      show: true,
      JobList: [],
      jobSelectShow: false,
      birthdayShow: false,
      form: {
        avatar: null,
        nick_name: "",
        height: "",
        marital_status: "",
        constellation: "",
        education: "",
        graduation_school: "",
        work_place: "",
        salary1: "",
        job: "",
        work_type: "",
        housing: "",
        province: "", //籍贯
        age: "",
        soliloquy: "",
        birthday: "",
        sex: "F",
      },
      selectType: "",
      mode: "date",
      rules: {
        nick_name: [
          {
            required: true,
            message: "请输入昵称!",
            trigger: ["change", "blur"],
          },
          {
            max: 8,
            min: 1,
            message: "昵称在1-8字之间",
            trigger: ["change", "blur"],
          },
        ],
      },
      addressType: "",
      userList: [],
      loadAuthInfo: {},
      title: "",
      isSave: false,
      content: "您的个人资料已经修改，退出前要保存吗?",
      type: "",
      index: null,
      userInfo: {},
      imageValue: [],
      talkTipsImages: [],
    };
  },
  created() {
    const header = uni.getMenuButtonBoundingClientRect();
    this.header.top = header.top;
    this.header.height = header.height;
    this.header.allHeight = header.top + header.height + 6;
    loadAuthInfo().then((res) => {
      Object.assign(this.loadAuthInfo, res.data);
    });
    this.userInfo = uni.getStorageSync("userInfo");
    // uni.setStorageSync('userInfo', res.data);
    // this.userInfo = Object.assign({}, this.userInfo, res.data);
    getApp().globalData.userInfo = this.userInfo;
    uni.$on("uAvatarCropper", (path) => {
      this.avatar = path;
      // 可以在此上传到服务端
      uni.uploadFile({
        url: this.action,
        filePath: path,
        name: "file",
        complete: (res) => {
          console.log(JSON.parse(res.data));
          this.form.avatar = JSON.parse(res.data).data[0].url;
        },
      });
    });
    uni.getStorage({
      key: "userInfo",
      success: (res) => {
        this.form = Object.assign({}, this.form, res.data);
        this.show = !this.form.certificated;
        console.log(this.form, "==");
      },
    });
    // uni.getStorage({
    // 	key: 'isConsent',
    // 	success: res => {
    // 		this.show = false;
    // 	}
    // });
    getCareerList().then((res) => {
      this.JobList = this.deleteNull(res.data, "children");
    });
    recentAuthUsers().then((res) => {
      this.userList = res.data;
    });
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onShow() {
    getUserInfo();
    uni.getStorage({
      key: "userInfo",
      success: (res) => {
        this.userInfo = Object.assign({}, res.data);
        this.didCustomize = this.userInfo.customized === true;
        console.log("0-0-0-");
        console.log(this.didCustomize);
        getApp().globalData.userInfo = this.userInfo;
        this.isLogin = true;
      },
      fail: (err) => {
        this.isLogin = false;
      },
    });
  },
  filters: {
    sexLabel(sex) {
      if (sex === "男") return sex;
      if (sex === "女") return sex;
      return sex === "M" ? "男" : "女";
    },
  },
  methods: {
    loginDismiss() {
      this.isShowLogin = false;
    },
    decryptPhoneNumber(e) {
      let that = this;
      wxKeyManager.decryptPhoneNumber(e).then((res) => {
        console.log("wxkmanager-pohone---", res);
        that.isShowLogin = false;
        that.isLogin = true;
        EventBus.$emit("loginSuccess", true);
        that.didCustomize = (res.customized || false) == true;
      });
    },
    goProtocol(type) {
      uni.navigateTo({
        url: "/pageA/protocol/protocol?type=" + type,
      });
    },
    obtain_img(data) {
      this.talkTipsImages = data;
      console.log(data, "获取到的图片组" + data.length + "张");
    },
    clickDing() {
      uni.switchTab({
        url: "/pages/home2/home?type=ding",
      });
    },
    clickTongGuo() {
      uni.navigateTo({
        url: "/pageA/realName/realName?type=00",
      });
    },

    selectDatePicker(type) {
      this.type = type;
      this.$refs["date-time"].show();
    },
    dateTimeChange(value) {
      this.form.birthday = value;
    },
    cancelEvent() {
      uni.navigateBack();
    },
    confirmSave() {
      // this.isSave = false;
      this.onSubmit();
    },
    retu_back() {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "您的个人资料已经修改，退出前要保存吗?",
        success: function (res) {
          if (res.confirm) {
            that.confirmSave();
          } else if (res.cancel) {
            uni.navigateBack();
            console.log("用户点击取消");
          }
        },
      });
      // this.isSave = true;
    },
    chooseAvatar() {
      this.$u.route({
        url: "/uview-ui/components/u-avatar-cropper/u-avatar-cropper",
        params: {
          destWidth: 300,
          rectWidth: 200,
          fileType: "jpg",
        },
      });
    },
    deleteNull(list, name) {
      list.map((item, index) => {
        if (item[name].length == 0) {
          delete item[name];
        } else {
          this.deleteNull(item[name], name);
        }
      });
      return list;
    },
    confirmSelect(e) {
      this.$set(this.form, "job", e[1].label);
      this.jobSelectShow = false;
    },
    consentChange() {
      this.isConsent = !this.isConsent;
    },
    consentEvent() {
      this.show = false;
      // if (this.isConsent) {
      // 	uni.setStorage({
      // 		key: 'isConsent',
      // 		data: 'true',
      // 		success: () => {
      // 			this.show = false;
      // 		}
      // 	});
      // }
    },
    uploadAvater(data) {
      this.form.avatar = data.data[0].url;
    },
    provinceEvent(e) {
      if (e.city) {
        this.form[this.addressType] = e.province.label + e.city.label;
      } else {
        this.form[this.addressType] = e.province.label;
      }
    },
    addressShowEvent(value) {
      this.addressShow = true;
      this.addressType = value;
      switch (value) {
        case "province":
          this.title = "籍贯";
          break;
        case "work_place":
          this.title = "工作地";
          break;
      }
    },
    confirmBirthday(e) {
      this.form.birthday = e.result;
    },
    birthdayEvent() {
      this.birthdayShow = true;
    },
    onInput(e) {
      this.$emit("input", e.detail.value);
    },
    onSubmit(e) {
      if (!this.isLogin) {
        this.isShowLogin = true;
        return;
      }
      if (this.form.nick_name == "") {
        uni.showToast({
          title: "请输入昵称",
          icon: "none",
        });
        return;
      } else if (!this.form.height) {
        uni.showToast({
          title: "请选择身高",
          icon: "none",
        });
        return;
      } else if (this.form.province == "-1") {
        uni.showToast({
          title: "请选择籍贯",
          icon: "none",
        });
        return;
      } else if (this.form.marital_status == "") {
        uni.showToast({
          title: "请选择婚姻状况",
          icon: "none",
        });
        return;
      } else if (!this.form.birthday) {
        uni.showToast({
          title: "请选择出生日期",
          icon: "none",
        });
        return;
      } else if (this.form.education == "") {
        uni.showToast({
          title: "请选择学历",
          icon: "none",
        });
        return;
      } else if (this.form.graduation_school == "") {
        uni.showToast({
          title: "请输入毕业院校",
          icon: "none",
        });
        return;
      } else if (this.form.work_place == "") {
        uni.showToast({
          title: "请选择工作地",
          icon: "none",
        });
        return;
      } else if (this.form.salary1 == "") {
        uni.showToast({
          title: "请选择月收入",
          icon: "none",
        });
        return;
      } else if (this.form.job == "") {
        uni.showToast({
          title: "请选择职业",
          icon: "none",
        });
        return;
      } else if (this.form.work_type == "") {
        uni.showToast({
          title: "请选择单位性质",
          icon: "none",
        });
        return;
      } else if (this.form.housing == "") {
        uni.showToast({
          title: "请选择住房",
          icon: "none",
        });
        return;
      }
      if (this.talkTipsImages.length === 0) {
        uni.showToast({
          title: "请上传宣传图",
          icon: "none",
        });
        return;
      }

      // 发布动态 pic_urls
      createTip({ pic_urls: this.talkTipsImages, temp: false });
      // this.$refs.myPersonalLabel.save();
      // 暂时未做验证
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (this.form.sex === "男") {
            this.form.sex = "M";
          } else if (this.form.sex === "女") {
            this.form.sex = "F";
          }
          this.form.salary = this.form.salary1;
          completeInformation(this.form).then((res) => {
            if (res.status == 1) {
              this.$refs.uToast.show({
                title: res.message,
                type: "success",
              });
              if (this.didCustomize) {
                setTimeout(() => {
                  uni.reLaunch({
                    url: "/pages/home2/home",
                  });
                }, 1000);
              } else {
                uni.redirectTo({ url: "/pageA/my-profile/dingzhi" });
              }
            }
          });
        } else {
          console.log("验证失败");
        }
      });
    },
    selectShow(name) {
      this.selectType = name;
    },
    chooseValue(type, e) {
      this.form[type] = e[0].label;
      this.selectType = "";
    },
    // closeCom(type, e) {
    // 	this.form[type] = e[0].label;
    // 	this.selectType = '';
    // },
    closeValue() {
      this.selectType = "";
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.datum-box {
  padding-bottom: 200upx;
}
.mt20 {
  margin-top: 20rpx;
}
// .white-bg{
//   height: unset !important;
// }
.my-profile-pic {
  image {
    width: 100%;
    height: 190upx;
  }
}
.head-list {
  .head-list-title {
    font-weight: 400;
    color: rgba(131, 137, 160, 1);
    font-size: 28upx;
    line-height: 36upx;
  }
  .head-list-box {
    display: flex;
    justify-content: flex-start;
    image {
      display: block;
      width: 68upx;
      height: 68upx;
      border: 1px solid #fff;
      border-radius: 50%;
      overflow: hidden;
      margin-left: -20upx;
    }
    image:nth-child(1) {
      margin-left: 0;
      z-index: 5;
    }
    image:nth-child(2) {
      z-index: 4;
    }
    image:nth-child(3) {
      z-index: 3;
    }
    image:nth-child(4) {
      z-index: 2;
    }
    image:nth-child(5) {
      z-index: 1;
    }
  }
}
.information-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 120upx;
  .information-line-label {
    font-weight: 400;
    color: rgba(71, 74, 88, 1);
    line-height: 42upx;
    font-size: 32upx;
    .main-hint {
      background: rgba(255, 255, 255, 1);
      border-radius: 2px;
      border: 1px solid rgba(255, 170, 55, 1);
      font-size: 24upx;
      color: #ffaa37;
      padding: 0 10upx;
      margin-left: 20upx;
    }
  }
  .information-line-link {
    padding-right: 46upx;
    font-weight: 400;
    // color: rgba(131, 137, 160, 1);
    line-height: 42upx;
    font-size: 28upx;
    text-align: right;
    background: url("http://static.kuaimayoupin.com/8685799190963879.png")
      no-repeat right center;
    background-size: 40upx;
    image {
      display: block;
      width: 90upx;
      height: 90upx;
      border-radius: 50%;
    }
    .text-right view {
      text-align: right !important;
      font-size: 28upx;
    }
    .u-list-item {
      width: 90upx !important;
      height: 90upx !important;
      border: none !important;
      border-radius: 50%;
    }
    input {
      color: rgba(131, 137, 160, 1);
    }
  }
}
.information-line-soliloquy {
  padding: 20upx 0;
  border-bottom: 1px solid #dfe1ec;
}
.my-profile-box {
  .my-profile-box-title {
    font-size: 36upx;
    font-weight: 500;
    color: rgba(71, 74, 88, 1);
    line-height: 48upx;
    margin: 20upx 0;
  }
  .information-line {
    border-bottom: 1px solid #dfe1ec;
  }
}
.fixation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 30upx;
  box-sizing: border-box;
  width: 100%;
  height: 140upx;
  z-index: 99;
}
.submitBtn {
  width: 100%;
  line-height: 80upx;
  background: linear-gradient(
    135deg,
    rgba(252, 79, 145, 1) 0%,
    rgba(253, 108, 230, 1) 100%
  );
  border-radius: 2px;
  text-align: center;
  font-size: 36upx;
  color: rgba(255, 255, 255, 1);
}
.hint-message {
  font-size: 28upx;
  color: rgba(71, 74, 88, 1);
  line-height: 48upx;
  padding: 30upx 72upx 72upx 72upx;
}
.hint-sign {
  display: flex;
  justify-items: center;
  align-items: center;
  margin: 40upx 0;
}
.hint-btn {
  width: 376upx;
  line-height: 80upx;
}
.isDisabled {
  background: #ccc;
}
.content {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  width: 100vw;
  height: 100vh;
  .title {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    box-sizing: content-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 40rpx;
    image {
      width: 28rpx;
      height: 28rpx;
    }
  }
}
</style>
